<template>
    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <el-button type="primary" @click="jumpChildOne">策略生成与量化</el-button>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <el-button type="primary" @click="jumpChildTwo">电网统计分析</el-button>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
           <el-button type="primary" @click="jumpChildThree">知识库</el-button>
        </el-card>
      </el-col>
    </el-row>
    <keep-alive> 
      <router-view :key="$route.fullPath" />
    </keep-alive> 
</template>

<script lang="ts" setup>
import { computed, defineComponent, ref,watch,onMounted } from "vue";
import {useRouter,useRoute} from 'vue-router'
const route = useRoute()
 const router = useRouter()
onMounted(()=> {
   router.push('/effect/fault-process/fault-child1')
}
)

function jumpChildOne(){
    router.push('/effect/fault-process/fault-child1')
}

function jumpChildTwo(){
    router.push('/effect/fault-process/fault-child2')
}

function jumpChildThree(){
    router.push('/effect/fault-process/fault-child3')
}

//监控路由变化
watch(
  ()=>route.path,
  (newPath,oldPath)=>{
    if(newPath==='/effect/fault-process'){
        router.push('/effect/fault-process/fault-child1')
    }
  },
  {immediate:true}
)

</script>

<style scoped lang="scss">
.box-card {
  margin-bottom: 0px;
  background-color: rgb(26, 68, 94);
  color: rgb(245, 245, 245);
  border-width: 0;
  border-radius: 0;
}
 

</style>